<template>
<div class="login-wrap">
  <div class="login-dialog">
    <p class="title">用户登录</p>
    <el-form
        ref="form"
        :rules="loginRule"
        :model="loginForm"
        :hide-required-asterisk="true"
    >
      <el-form-item  prop="username">
        <el-input ref="username" prefix-icon="el-icon-user" v-model="loginForm.username" placeholder="请输入用户名/手机号" clearable/>
      </el-form-item>
      <el-form-item  prop="password">
        <el-input ref="password"  prefix-icon="el-icon-lock" type="password" placeholder="请输入密码" v-model="loginForm.password" show-password clearable/>
      </el-form-item>
      <el-form-item  prop="code">
        <el-input
            v-model="loginForm.code"
            auto-complete="off"
            placeholder="验证码"
            style="width: 67%"
            prefix-icon="el-icon-picture-outline"
            @keyup.enter.native="submit"
        >
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="submit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>

<script>
import {getCodeImg} from "@/api/user";

export default {
  name: "index",
  data() {
    return {
      redirect: undefined,
      codeUrl: "",
      loginForm:{
        username:undefined,
        password:undefined,
        code:"",
        uuid: ""
      },
      loginRule:{
        username:[
          {required:true,message:'账号不能为空',trigger:'blur'}
        ],
        password:[
          {required:true,message:'密码不能为空',trigger:'blur'}
        ],
        code: [{ required: true, trigger: "blur", message: "验证码不能为空" }]
      }
    }
  },
  watch:{
    $route: {
      handler: function(route) {
        this.redirect = route.path
      },
      immediate: true
    }
  },
  created() {
    this.getCode()
  },
  mounted() {
    if (this.loginForm.username === undefined) {
      this.$refs.username.focus()
    } else if (this.loginForm.password === undefined) {
      this.$refs.password.focus()
    }
  },
  methods:{
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = "data:image/gif;base64," + res.data.img;
        this.loginForm.uuid = res.data.uuid;
      })
    },
    submit() {
      this.$refs.form.validate(vaild => {
        if (vaild) {
          this.$store.dispatch('login',this.loginForm)
          .then(() => {
            // this.$store.dispatch('getInfo')
            this.$router.push({path:'/index'})
            this.$modal.notifySuccess('登录成功')
          }).catch(err => {
            console.log(err)
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.login-wrap {
  height: 100%;
  width: 100%;
  position: relative;
  background: url("../../assets/images/login-bg.png");
  background-size: 100% 100%;
  /*background-repeat: no-repeat;*/
}
.login-dialog {
  /*height: 200px;*/
  width: 380px;
  padding: 0 20px;
  position: absolute;
  right: 10px;
  top: 50%;
  text-align: center;
  transform: translate(-50%,-50%);
  background-color: rgba(255,255,255, 0.9);
  border-radius: 5px;
}
p.title {
  font-size: 20px;
  color: #676767;
  font-weight: 700;
}
</style>
